$iconUrl = '/vuepress-docs-template'

.custom-block
  .custom-block-title
    font-weight 600
    margin-bottom -0.4rem
  &.tip, &.warning, &.danger
    padding .1rem 1.5rem
    border-left-width .5rem
    border-left-style solid
    margin 1rem 0
  &.tip
    background-color #f3f5f7
    border-color #42b983
  &.warning
    background-color rgba(255,229,100,.3)
    border-color darken(#ffe564, 35%)
    color darken(#ffe564, 70%)
    .custom-block-title
      color darken(#ffe564, 50%)
    a
      color $textColor
  &.danger
    background-color #ffe6e6
    border-color darken(red, 20%)
    color darken(red, 70%)
    .custom-block-title
      color darken(red, 40%)
    a
      color $textColor
  &.details
    display block
    position relative
    border-radius 2px
    margin 1.6em 0
    padding 1.6em
    background-color #eee
    h4
      margin-top 0
    figure, p
      &:last-child
        margin-bottom 0
        padding-bottom 0
    summary
      outline none
      cursor pointer


.custom-block 
  padding 0.1rem 1.5rem
  margin 2em 0
  border-left-width 0.5rem
  border-left-style solid
  position relative
  border-bottom-right-radius 2px
  border-top-right-radius 2px
  margin 1rem 0
  &::before 
    position absolute
    top 19px
    left -14px
    color #fff
    width 20px
    height 20px
    border-radius 100%
    text-align center
    line-height 20px
    font-weight bold
    font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
    font-size 14px
  p
    color #222

  .custom-block-title
    font-weight 600
    margin-bottom -0.4rem

  &.info
    border-color #007bff
    background-color #f8f8f8
    &::before
      content url($iconUrl + '/images/icons/info.svg')
      width 25px
      height 25px
      left -16px
      box-sizing border-box

  &.tip 
    border-color #42b983
    background-color #f8f8f8
    &::before 
      content url($iconUrl + '/images/icons/bulb.svg')
      width 25px
      height 25px
      left -16px

  &.warning
    border-color #f4cd00
    background-color #f8f8f8
    .custom-block-title 
      color #222
    &::before 
      content url($iconUrl + '/images/icons/danger.svg')
      width 25px
      height 25px
      left -16px
      box-sizing border-box

  &.danger 
    border-color #f66
    background-color #f8f8f8
    .custom-block-title 
      color #222
    &::before 
      content url($iconUrl + '/images/icons/stop.svg')
      width 25px
      height 25px
      left -16px

  &.details 
    display block
    position relative
    border-radius 2px
    margin 1.6em 0
    padding 1.6em
    background-color #eee
    h4 
      margin-top 0
    figure
    p 
      &:last-child 
        margin-bottom 0
        padding-bottom 0
    summary 
      outline none
      cursor pointer
